<template>
    <header class="header">
      <div class="title">游戏运营后台管理系统</div>
      <div class="titleright">
        <!-- 全屏显示 -->
        <div class="btn-fullscreen" @click="handleFullScreen">
           <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                <i class="el-icon-rank" v-if="fullscreen"></i>
                <i class="el-icon-full-screen" v-else></i>
           </el-tooltip>
        </div>
        <span class="titlehy">欢迎，&nbsp;<span>{{ user }}</span></span>
        <el-dropdown @command="setDialogInfo" style="margin-top:2px;">
          <span class="el-dropdown-link">
            <span class="titles">用户设置</span>
            <i class="el-icon-arrow-down el-icon--right" style="color: #fff"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="info">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      user: sessionStorage.getItem('user'),
      fullscreen:''
    };
  },
  methods: {
    // 全屏事件
    handleFullScreen() {
        let element = document.documentElement;
        if (this.fullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
        }
        this.fullscreen = !this.fullscreen;
    },
    // 下拉框选择，点击个人信息后调整到对应的函数执行
    setDialogInfo(comItem) {
      switch (comItem) {
        case "info":
          this.showInfoList();
          break;
        case "logout":
          this.logout();
          break;
      }
    },
    //展示个人信息
    showInfoList() {
      this.$alert(
        `<div>
            名称：${this.user}
            <br/>
            身份：管理员
          </div>`,
        "个人名片",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    logout() {
      this.$confirm("确定退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //点击确定的操作(调用接口)
          window.sessionStorage.clear();
          this.$router.push("/login");
        })
        .catch(() => {
          return;
        });
    },
  },
};
</script>
<style scoped>
.titlehy {
  padding: 0 20px;
  font-size: 18px;
  color: #fff;
}
.titles {
  font-size: 16px;
  color: #fff;
}
.header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.header .title {
  color: #41b883;
  font-size: 18px;
  text-align: left;
}
.header .titleright {
  color: white;
  display: flex;
  font-size: 16px;
  position: absolute;
  right: 20px;
}
.btn-fullscreen{
   font-size: 22px;
}
</style>